<template>
  <div>
    <div style="background-color: #13293B;transition: all 1s ease-in;margin-top: -60px;height: 60px;"></div>
    <div class="pwd-container" id="backPwdIndex">
      <input style="display:none"><!-- for disable autocomplete on chrome -->
      <!-- 找回密码 zhnagQ 2018年1月16日 15:22:33 -->
      <Row>
        <i-col span="24" class="steps-box">
          <Steps :current="currentStep" class="backPwdStep">
            <Step title="填写帐号"></Step>
            <Step title="验证身份"></Step>
            <Step title="设置新密码"></Step>
            <Step title="完成"></Step>
          </Steps>
        </i-col>
      </Row>
      <Row>
        <i-col span="24" class="content-box">
          <!-- 填写帐号 -->
          <inputUserName @next="checkUserName" v-if="currentStep==0"></inputUserName>

          <!-- 手机验证 -->
          <verifyForm @next="nextConfPwd" :userInfo="userInfo" v-if="currentStep == 1"></verifyForm>

          <!-- 设置新密码 -->
          <newPwdFrom @next="updatePwdBefore" v-if="currentStep==2"></newPwdFrom>

          <!-- 完成 -->
          <p class="prompt-complete" v-if="currentStep==3">
            <Icon type="ios-checkmark" class="prompt-complete-icon"></Icon>
            重置密码成功，使用新密码去
            <router-link :to="{path: '/user/login'}">登录</router-link>
          </p>

          <Button type="primary" long @click="BackPwdNext" style="width: 316px;margin-left:100px;height: 50px;"
                  :disabled="nextBtnEable"
                  v-if="currentStep!=2 && currentStep!=3">下一步
          </Button>
          <Button type="primary" long style="width: 316px;margin-left:100px;height: 50px;" :disabled="nextBtnEable"
                  @click="updatePwd"
                  v-if="currentStep==2">确定
          </Button>
        </i-col>
      </Row>
    </div>
  </div>
</template>
<script>
  import { updateForgetPwd } from '@api/common/user'
  import inputUserName from './components/inputUserName'
  import verifyForm from './components/verifyForm'
  import newPwdFrom from './components/newPwdFrom'

  export default {
    name: 'index',
    data () {
      let userInfo = {}
      let currentStep = 0
      let nextBtnEable = true
      let newPwd = ''
      let datas = { currentStep, nextBtnEable, userInfo, newPwd }
      return datas
    },
    methods: {
      checkUserName (isSuccess, userInfo) {
        if (isSuccess) {
          this.userInfo = userInfo
          this.nextBtnEable = false
        } else {
          this.nextBtnEable = true
        }
      },
      nextConfPwd (isSuccess) {
        if (isSuccess) {
          this.nextBtnEable = false
        } else {
          this.nextBtnEable = true
        }
      },
      updatePwdBefore (isSuccess, newPwd) {
        if (isSuccess) {
          this.newPwd = newPwd
          this.nextBtnEable = false
        } else {
          this.newPwd = ''
          this.nextBtnEable = true
        }
      },
      /**
       * 下一步按钮
       * @constructor
       */
      BackPwdNext () {
        if (+this.currentStep < 3) {
          this.currentStep += 1
        } else {
          this.currentStep = 0
        }
        this.nextBtnEable = true
      },
      /**
       * 修改密码
       **/
      updatePwd () {
        if (!(this.userInfo && this.userInfo.data && this.userInfo.data.user && this.userInfo.data.user.loginName && this.newPwd)) {
          this.nextBtnEable = true
          return Promise.reject(new Error('用户信息错误'))
        }
        updateForgetPwd({
          userName: this.userInfo.data.user.loginName,
          newPwd: this.newPwd
        }).then((response) => {
          let resData = response.data
          if (+resData.isSuccess === 1) {
            this.BackPwdNext()
          } else {
            this.$Notice.open({
              title: resData.res ? resData.res : '修改失败，请稍后再试'
            })
            this.nextBtnEable = true
          }
        }).catch((error) => {
          this.$Notice.open({
            title: error ? (error + '') : '修改失败，请稍后再试'
          })
        })
      }
    },
    computed: {},
    mounted () {
    },
    components: { inputUserName, verifyForm, newPwdFrom }
  }
</script>
<style>

</style>
<style scoped>
  /*.pwd-container {*/
  /*height: 110px;*/
  /*padding: 30px 250px;*/
  /*background-color: #ffffff*/
  /*}*/

  .pwd-container {
    width: 1100px;
    margin: 60px auto;
    /*display: flex;*/
    justify-content: space-between;
    background-color: #ffffff;
  }

  .steps-box {
    height: 110px;
    padding: 30px 250px;
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    border-radius: 2px 2px 0 0;
  }

  .content-box {
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    border-radius: 2px;
    height: 276px;
    padding: 50px 341px;
  }

  .content-box .valit-btn {
    width: 316px;
    height: 40px;
    background-image: linear-gradient(-180deg, #FFFFFF 0%, #F3F4F1 100%);
    border: 1px solid #CCCCCC;
    border-radius: 2px;

    font-family: MicrosoftYaHei;
    font-size: 14px;
    color: #666666;
    letter-spacing: 0;

    text-align: left;
  }

  .content-box .valit-btn .oval {
    font-size: 18px;
    color: #3A91F5;
  }

  .prompt-title {
    font-family: PingFangSC-Medium;
    font-size: 16px;
    color: #1B1E21;
    letter-spacing: 0;
    line-height: 14px;
    /*padding-left: 25px;*/
  }

  .prompt-descrip {
    ont-family: PingFangSC-Regular;
    font-size: 14px;
    color: #666666;
    letter-spacing: 0;
    line-height: 14px;
    /*padding-left: 25px;*/
    margin-top: 15px;
    margin-bottom: 20px;
  }

  .prompt-valie-btn {
    font-family: PingFangSC-Medium;
    font-size: 12px;
    color: #E4B017;
    letter-spacing: 0;
  }

  .prompt-valie-btn-disable {
    font-family: PingFangSC-Medium;
    font-size: 12px;
    color: #0F1717;
    letter-spacing: 0;
  }

  .prompt-complete {
    padding: 46px 0 49px 0;
    font-family: PingFangSC-Medium;
    font-size: 18px;
    color: #1B1E21;
    margin: 0 auto;
  }

  .prompt-complete-icon {
    color: #52c461;
    font-size: 30px;
    margin-bottom: -5px;
  }

  input {
    width: 316px;
    height: 40px;
    background: #FFFFFF;
    border: 1px solid #E3E3E3;
    border-radius: 2px;
  }
</style>
<style>

  .backPwdStep .ivu-steps-item.ivu-steps-status-process .ivu-steps-head-inner {
    border-color: #FECA2E;
    background-color: #FECA2E;
  }

  .backPwdStep .ivu-steps-item.ivu-steps-status-process .ivu-steps-head-inner span {
    color: #131820;
  }

  .backPwdStep .ivu-steps-item.ivu-steps-status-wait .ivu-steps-head-inner {
    border-color: #eee;
    background-color: #eee;
  }

  .backPwdStep .ivu-steps-item.ivu-steps-status-wait .ivu-steps-head-inner span {
    color: #cfcfcf;
  }

  /*.backPwdStep .ivu-steps-item.ivu-steps-status-wait .ivu-steps-title{

  }*/
  .backPwdStep .ivu-steps-item.ivu-steps-main {
    display: block;
  }

  .backPwdStep .ivu-steps-item .ivu-steps-title {
    display: block;
    padding: 0;
    margin-top: 5px;
    text-align: center;
  }

  .backPwdStep {
    margin-left: 100px;
  }
</style>
